<!DOCTYPE html>
<head>
    <title>
       模板语法-指令
    </title>
<script src="vue.js"></script>
</head>
<body>
<!-- <div id = "app" v-once> -->
<div id = "app">
    <p v-if='seen'>now, you can see this.</p>
    <a v-bind:href='url'>bing</a>
    <div @click='click1'>
        <div @click.stop='click2'>
            click it
        </div>
    </div>
</div>
<script type="text/javascript">
    var data = { m : 111 };
    var vm = new Vue({
        el : "#app",
        data : {
            seen : 0,
            url : 'http://www.bing.com'

        },
        methods:{
            click1 : function(){
                console.log('click11111')
            },
            click2 : function(){
                console.log('click22222')
            }


        }
    }); 
    vm.$watch('m', function(newVal, oldVal){
        console.log('value change from',newVal,2, oldVal)
    })
    
    vm.m = 'test'
</script>
<style type='text/css'>
    .red{color:red}
    .blue{color:blue; font-size: 100px;}
</style>
</body>
